<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
</head>
<style>
    .layui-top-box {padding:40px 20px 20px 20px;color: #3F3F3F}
    .panel {margin-bottom:17px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .pull-right {float: right;}
</style>
<body style="background-color: #F0F0F0">
<div class="layuimini-container" style="width: auto">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md4">
                <div class="col-xs-6 col-md-3">

                    <div class="panel">

                        <div class="panel-body">
                            <div class="layui-input-inline"><i class="layui-icon"  style="font-size: 80px; color: #1E9FFF;">&#xe613;</i></div>
							<div class="layui-input-inline" style="width: 180px;">
								<div class="panel-title">
									<span class="label pull-right layui-bg-blue">实时</span>
									<h5>学生统计</h5>
								</div>
								<div class="panel-content">
									<h1 class="no-margins" id="sCount"></h1>
									<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i></div>
									<small>在校学生数量</small>
								</div>
							</div>
                            
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="col-xs-6 col-md-3">
                    <div class="panel">
                        <div class="panel-body">
							<div class="layui-input-inline"><i class="layui-icon"  style="font-size: 80px; color: #1E9FFF;">&#xe612;</i></div>
								<div class="layui-input-inline" style="width: 180px;">
									<div class="panel-title">
										<span class="label pull-right layui-bg-cyan">实时</span>
										<h5>职工统计</h5>
									</div>
									<div class="panel-content">
										<h1 class="no-margins" id="uCount"></h1>
										<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i></div>
										<small>在职职工数量</small>
									</div>
								</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md4">
                <div class="col-xs-6 col-md-3">
                    <div class="panel">
                        <div class="panel-body">
							<div class="layui-input-inline"><i class="layui-icon"  style="font-size: 80px; color: #1E9FFF;">&#xe66f;</i></div>
							<div class="layui-input-inline" style="width: 180px;">
								<div class="panel-title">
									<span class="label pull-right layui-bg-orange">实时</span>
									<h5>教师统计</h5>
								</div>
								<div class="panel-content">
									<h1 class="no-margins" id="tCount"></h1>
									<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i></div>
									<small>在职教师数量</small>
								</div>
							</div>
						</div>
                    </div>
                </div>
            </div>

        </div>
    </div>



    <div class="layui-box">
		<div class="layui-row ">
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">
							<h2 style="text-align: center"><b>年级人数分布</b></h2>
						</div>
						<div class="layui-card-body">
							<div id="scoreBar" style="width: 100%;height: 500px;"> </div>
						</div>
					</div>
				</div>
				<!--
				<div class="layui-col-md4">

					<div class="layui-card">
						<div class="layui-card-header">
							<h2 style="text-align: center"><b>我的应用</b></h2>
						</div>
						<div class="layui-card-body" id="myAppList">
							<a href="javascript:;" data-id="userProper" data-title="基本资料" data-url="/index/users/info" class="menuNvaBar">基本资料</a>
						</div>
					</div>
					<div class="layui-card">
						<div class="layui-card-header">
							<h2 style="text-align: center"><b>我的消息</b></h2>
						</div>
						<div class="layui-card-body">
							<ul class="layui-timeline">
								<li class="layui-timeline-item">
									<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
									<div class="layui-timeline-content layui-text">
										<h3 class="layui-timeline-title">2020年3月18日</h3>
										<p>
											一切准备工作似乎都已到位。发布之弦，一触即发。
											<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
											<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
										</p>
									</div>
								</li>
								<li class="layui-timeline-item">
									<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
									<div class="layui-timeline-content layui-text">
										<div class="layui-timeline-title">过去</div>
									</div>
								</li>
							</ul>
						</div>
					</div>

				</div>-->

			</div>
		</div>
	</div>
</div>
<script src="/layui/layui.all.js"></script>
<script src="/js/echarts.min.js"></script>
<script src="/js/core.util.js"></script>
<script type="text/javascript" >
    //从response对象中去获取数据
	var $ = jQuery = layui.jquery;
	
	//获取token
    var token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    var tokenQuery = token.replace("#", "%23");
    var tableIns1;
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = jQuery = layui.jquery;
    var laydate = layui.laydate;
	var element = layui.element;
	
	layui.use(['table', 'layer', 'laydate'], function () {
		CoreUtil.sendPost("/dlClass/getMainPageData", {}, function(res){
			var data = res.data;
			$("#sCount").text(data.sCount);
			$("#tCount").text(data.tCount);
			$("#uCount").text(data.uCount);
			var eChartVo = data.eChartVo;
			var scoreBar = echarts.init(document.getElementById('scoreBar'));
			var lineOptions = {
				title: {
					text: eChartVo.title,
					x: 'center'
				},
				legend: {
					right: 'right',
					orient: 'vertical', //类型垂直,默认水平
					data: eChartVo.legend
				},
				xAxis: {
					data: eChartVo.xAxis,
					name: eChartVo.xName
				},
				yAxis: {
					type: "value",
					name: "人数"
				},
				series: eChartVo.series,
				tooltip : {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: '#6a7985'
						}
					}
				}
			};
			scoreBar.setOption(lineOptions, true);
		});
	
	});
	$(function(){
		 $(document).on('click', '.menuNvaBar', function () {
            var dataid = $(this);
            if ($(".layui-tab-title li[lay-id]").length <= 0) {
                if (CoreUtil.isEmpty(dataid.attr("data-icon"))){
                    var title = "<span>"+dataid.attr("data-title")+"</span>";
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                } else {
                    var title = "<span>"+dataid.attr("data-title")+"</span>";
                    title = '<i class="layui-icon '+dataid.attr("data-icon")+'"></i> ' + title;
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                }
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    if (CoreUtil.isEmpty(dataid.attr("data-icon"))){
                        var title = "<span>"+dataid.attr("data-title")+"</span>";
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                    } else {
                        var title = "<span>"+dataid.attr("data-title")+"</span>";
                        title = '<i class="layui-icon '+dataid.attr("data-icon")+'"></i> ' + title;
                        active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), title);
                    }
                }
            }
            active.tabChange(dataid.attr("data-id"));
        });
	});
	//触发事件
    var active = {
        tabAdd: function (url, id, title) {
            if (url != "" && url != null && url != undefined) {
                element.tabAdd('tab', {
                    title: title
                    ,
                    content: '<iframe data-frameid="' + id + '" frameborder="0" name="content" width="100%" src="' + url + '"></iframe>'
                    ,
                    id: id
                })
            }
            FrameWH();//计算框架高度
        },
        tabChange: function (id) {
            //切换到指定Tab项
            element.tabChange('tab', id); //切换到：用户管理
            $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切换后刷新框架
        },
        tabDelete: function (id) {
            element.tabDelete("tab", id);//删除
        }
    };
	
	function FrameWH() {
        var h = $(window).height() - 41 - 10 - 35 - 10 - 44 - 10;
        $("iframe").css("height", h + "px");
		console.log("**********");
    };
    
	

</script>

</body>
</html>